<template>
	<view class="template-fullpage">
		<swiper class="card-swiper" :circular="true" @change="cardSwiper">
			<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
				<view class="swiper-item image-banner">
					<image :src="item.bgUrl" mode="aspectFill" style="height: 100vh;width: 100vw;"></image>
				</view>
				<view class="swiper-item-png image-banner">
					<image style="height:860rpx;" :src="item.url" mode="aspectFit"></image>
				</view>
				<view class="swiper-item-text">
					<view class="tn-text-xxl tn-text-bold tn-color-white">{{item.title}}</view>
					<view class="tn-text-xl tn-text-bold tn-color-white tn-padding-top-xs">{{item.subTitle}}</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="indication">
			<block v-for="(item,index) in swiperList" :key="index">
				<view class="spot" :class="cardCur==index?'active':''"></view>
			</block>
		</view>
		<view class="go">
			<tn-button @tap="launch" class="go-button" plain fontColor="#FFFFFF" fontBold shape="round" padding="0 40rpx">立即体验</tn-button>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Guide',
		mixins: [],
		data() {
			return {
				cardCur: 0,
				swiperList: [{
					bgUrl: '/static/images/guide/guide-bg1.jpg',
					url: '/static/images/guide/c4d7.png',
					title: "总有你想不到的创意",
					subTitle: "海量分享"
				}, {
					bgUrl: '/static/images/guide/guide-bg2.jpg',
					url: '/static/images/guide/c4d8.png',
					title: "",
					subTitle: ""
				}, {
					bgUrl: '/static/images/guide/guide-bg3.jpg',
					url: '/static/images/guide/c4d9.png',
					title: "",
					subTitle: ""
				}, {
					bgUrl: '/static/images/guide/guide-bg4.jpg',
					url: '/static/images/guide/c4d10.png',
					title: "",
					subTitle: ""
				}],
			}
		},
		onBackPress() {
			return true;
		},
		methods: {
			launch() {
				uni.$tn.vuex('vuex_launch_flag', true);
				uni.$common.navigateTo('/pages/login/login');
			},
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* 全屏轮播  start*/
	.card-swiper {
		height: 100vh !important;
	}

	.card-swiper {
		width: 750rpx !important;
		left: 0rpx;
		box-sizing: border-box;
		overflow: initial;

		swiper-item {
			&.cur {
				.swiper-item {
					transform: none;
					transition: all 0.2s ease-in 0s;
				}

				.swiper-item-png {
					margin-top: -85vh;
					-webkit-transform: translate(0px, 0px) scale(1);
					transform: translate(0px, 0px) scale(1);
					transition: all .6s ease 0s;
				}

				.swiper-item-text {
					margin-top: -28px;
					width: 100%;
					-webkit-transform: translate(14px, 0px) scale(.9);
					transform: translate(14px, 0px) scale(.9);
					transition: all .6s ease 0s;
				}
			}

			.swiper-item {
				width: 100%;
				display: block;
				height: 100vh;
				border-radius: 0rpx;
				transform: scale(1);
				transition: all 0.2s ease-in 0s;
				overflow: hidden;
			}

			.swiper-item-png {
				margin-top: -85vh;
				display: block;
				border-radius: 0px;
				-webkit-transform: translate(18px, 9px) scale(.8);
				transform: translate(18px, 9px) scale(.8);
				transition: all .6s ease 0s;
				overflow: hidden;
			}

			.swiper-item-text {
				margin-top: 0px;
				width: 100%;
				display: block;
				height: 50%;
				border-radius: 4px;
				-webkit-transform: translate(14px, -18px) scale(.7);
				transform: translate(14px, -18px) scale(.7);
				transition: all .6s ease 0s;
				overflow: hidden;
			}
		}
	}

	.image-banner {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.image-banner image {
		width: 100%;
	}

	.go {
		z-index: 9999;
		width: 100%;
		position: fixed;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		bottom: 3vh;

		.go-button {
			border-color: #ffffff !important;
		}
	}

	/* 轮播指示点 start*/
	.indication {
		z-index: 9999;
		width: 100%;
		height: 36rpx;
		position: fixed;
		bottom: 3vh;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;

		.spot {
			background-color: #ffffff;
			width: 10rpx;
			height: 10rpx;
			border-radius: 20rpx;
			margin: 0rpx 16rpx !important;

			&.active {
				width: 30rpx;
				background-color: #ffffff;
			}
		}
	}
</style>